<template>
  <div class="_wz_vehiclePortraitDetails">
    <Row style="height: 100%;">
      <Col span="10" style="height: 100%;">
        <div class="bannerBox">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper" v-if="bigImg.length > 0">
              <div class="swiper-slide" v-for="(item,index) of bigImg" :key="index">
                <viewer class="swiper-slide_img">
                  <img :src="item.img" @error="public.imgDispose">
                </viewer>
              </div>
            </div>
          </div>
          <div style="height: 15px;width: 400px;"></div>
          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper" v-if="bigImg.length > 0">
              <div class="swiper-slide swiper-bottom" v-for="(item,index) of bigImg" :key="index">
                <img :src="item.img" @error="public.imgDispose">
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </Col>
      <Col span="9" style="height: 100%;display: flex;justify-content: center;align-items: center;">
        <div class="_wz_vehicleDetails">
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">运输企业</span>
            <span class="_wz_vehicleDetailsList_value _wz_vehicleDetailsList_deptName" @click="$emit('details', '企业详情')">
              {{ !!seeDeptData.deptName ? seeDeptData.deptName : '--' }}
            </span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">运输类型</span>
            <span class="_wz_vehicleDetailsList_value">{{ !!seeDeptData.transportValue ? seeDeptData.transportValue : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">联系人</span>
            <span class="_wz_vehicleDetailsList_value">{{ !!seeDeptData.contact ? seeDeptData.contact : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">联系电话</span>
            <span class="_wz_vehicleDetailsList_value">{{ !!seeDeptData.phone ? seeDeptData.phone : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">主管机关</span>
            <span class="_wz_vehicleDetailsList_value">{{ !!seeDeptData.parentName ? seeDeptData.parentName : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">所属区域</span>
            <span class="_wz_vehicleDetailsList_value">
              {{!!seeDeptData.provinceName?seeDeptData.provinceName:'--'}}
              {{!!seeDeptData.cityName?seeDeptData.cityName:'--'}}
              {{!!seeDeptData.countyName?seeDeptData.countyName:'--'}}
            </span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">法人代表</span>
            <span class="_wz_vehicleDetailsList_value">{{ !!seeDeptData.legalPerson ? seeDeptData.legalPerson : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">有效期止</span>
            <span class="_wz_vehicleDetailsList_value">
              {{!!seeDeptData.certificateFoundDate?seeDeptData.certificateFoundDate:'--' }} 至
              {{!!seeDeptData.certificateDueDate?seeDeptData.certificateDueDate:'--' }}
            </span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">注册地址</span>
            <span class="_wz_vehicleDetailsList_value" style="white-space: initial;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{ !!seeDeptData.certificateAddress ? seeDeptData.certificateAddress : '--' }}</span>
            <div style="clear: both;"></div>
          </div>
        </div>
      </Col>

      <Col span="5" style="height: 100%;display: flex;justify-content: center;align-items: center;">
        <div style="height: 380px;display: flex;align-items: center;flex-direction: column;justify-content: center;">
          <div class="_wz_maintenanceData" @click="$emit('details', '岗位责任制度')">
            <div class="_wz_maintenanceData_img">
              <img :src="!!productionManagementSystem.post && !productionManagementSystem.post.unExist?'../../static/img/icon_post_on.png':'../../static/img/icon_post.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_maintenanceData_name">
              <div>岗位责任制度</div>
              <div v-if="!!productionManagementSystem.post">
                <Progress :percent="parseInt(productionManagementSystem.post.exist / (productionManagementSystem.post.exist + productionManagementSystem.post.unExist) * 100)" class="_wz_system_progress"/>
              </div>
              <div v-else>
                <Progress :percent="0" class="_wz_system_progress"/>
              </div>
            </div>
          </div>
          <div class="_wz_maintenanceData" @click="$emit('details', '安全组织架构')">
            <div class="_wz_maintenanceData_img">
              <img :src="!!productionManagementSystem.org && !productionManagementSystem.org.unExist?'../../static/img/icon_Safety_on.png':'../../static/img/icon_Safety.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_maintenanceData_name">
              <div>安全组织架构</div>
              <div v-if="!!productionManagementSystem.org">
                <Progress :percent="parseInt(productionManagementSystem.org.exist / (productionManagementSystem.org.exist + productionManagementSystem.org.unExist) * 100)" class="_wz_system_progress"/>
              </div>
              <div v-else>
                <Progress :percent="0" class="_wz_system_progress"/>
              </div>
            </div>
          </div>
          <div class="_wz_maintenanceData" @click="$emit('details', '日常管理制度')">
            <div class="_wz_maintenanceData_img">
              <img :src="!!productionManagementSystem.daily && !productionManagementSystem.daily.unExist?'../../static/img/icon_daily_on.png':'../../static/img/icon_daily.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_maintenanceData_name">
              <div>日常管理制度</div>
              <div v-if="!!productionManagementSystem.daily">
                <Progress :percent="parseInt(productionManagementSystem.daily.exist / (productionManagementSystem.daily.exist + productionManagementSystem.daily.unExist) * 100)" class="_wz_system_progress"/>
              </div>
              <div v-else>
                <Progress :percent="0" class="_wz_system_progress"/>
              </div>
            </div>
          </div>
          <div class="_wz_maintenanceData" @click="$emit('details', '操作规程制度')">
            <div class="_wz_maintenanceData_img">
              <img :src="!!productionManagementSystem.operate && !productionManagementSystem.operate.unExist?'../../static/img/icon_operate_on.png':'../../static/img/icon_operate.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_maintenanceData_name">
              <div>操作规程制度</div>
              <div v-if="!!productionManagementSystem.operate">
                <Progress :percent="parseInt(productionManagementSystem.operate.exist / (productionManagementSystem.operate.exist + productionManagementSystem.operate.unExist) * 100)" class="_wz_system_progress"/>
              </div>
              <div v-else>
                <Progress :percent="0" class="_wz_system_progress"/>
              </div>
            </div>
          </div>
          <div class="_wz_maintenanceData" @click="$emit('details', '动态监控制度')">
            <div class="_wz_maintenanceData_img">
              <img :src="!!productionManagementSystem.monitor && !productionManagementSystem.monitor.unExist?'../../static/img/icon_dynamic_on.png':'../../static/img/icon_dynamic.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_maintenanceData_name">
              <div>动态监控制度</div>
              <div v-if="!!productionManagementSystem.monitor">
                <Progress :percent="parseInt(productionManagementSystem.monitor.exist / (productionManagementSystem.monitor.exist + productionManagementSystem.monitor.unExist) * 100)" class="_wz_system_progress"/>
              </div>
              <div v-else>
                <Progress :percent="0" class="_wz_system_progress"/>
              </div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {Swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  props: ['seeDeptData'],//接收来自父组件的数据
  components: {
    Swiper,
    swiperSlide
  },
  data() {
    return {
      productionManagementSystem:{},//生产管理制度
      bigImg: [
        // {name: '车头照片', img: '../../static/img/zwtpxd.png'},
        // {name: '行驶证照片', img: '../../static/img/zwtpxd.png'},
        // {name: '营运证照片', img: '../../static/img/zwtpxd.png'},
        // {name: '备用', img: '../../static/img/zwtpxd.png'},
      ],
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    if(!!that.seeDeptData){
      if(!!that.seeDeptData.uuid){
        that.enterpriseDataLoading();
      }
    }
  },
  methods: {//执行的方法
    //企业数据加载
    enterpriseDataLoading(){
      var that = this;
      //生产管理制度
      that.axios.post(that.apiUrl.webApi + "/deptPortrait/productionManagementSystem", {deptUuid: that.seeDeptData.uuid}).then(res => {
        if (!!res) {
          that.productionManagementSystem = res.data.data;
        }
      }).catch(err => {
        console.log('失败', err);
      })

      that.bigImg = [
        {
          name: '营业执照',
          img: !!that.seeDeptData.uniformSocialCreditImg ? that.apiUrl.imgUrl + that.seeDeptData.uniformSocialCreditImg : '../../static/img/zwtpxd.png'
        },
        {
          name: '经营许可证',
          img: !!that.seeDeptData.transportBusinessLicenseImg ? that.apiUrl.imgUrl + that.seeDeptData.transportBusinessLicenseImg : '../../static/img/zwtpxd.png'
        },
        {
          name: '企业照片',
          img: !!that.seeDeptData.deptPic ? that.apiUrl.imgUrl + that.seeDeptData.deptPic : '../../static/img/zwtpxd.png'
        },
        // {name: '备用', img: !!that.seeDeptData.vehicleImg?that.apiUrl.imgUrl +that.seeDeptData.vehicleImg:'../../static/img/zwtpxd.png'},
      ];
      that.$nextTick(function () {
        that.galleryThumbsLunbo();
        that.galleryTopLunbo();
      });
    },
    galleryThumbsLunbo() {
      this.galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 15,    //在slide之间设置距离（单位px）
        slidesPerView: 3,    //设置slider容器能够同时显示的slides数量
        loop: true,        //设置为true 则开启loop模式
        freeMode: true,    //默认为false，普通模式：slide滑动时只滑动一格
        loopedSlides: 7,    //一般设置大于可视slide个数2个即可
        watchSlidesVisibility: true,   //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
        watchSlidesProgress: true,   //开启这个参数来计算每个slide的progress(进度、进程)
      });
    },
    galleryTopLunbo() {
      this.galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 0,
        loop: true,
        loopedSlides: 5,
        // 左右按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {        //thumbs组件专门用于制作带缩略图的swiper
          swiper: this.galleryThumbs,
          slideThumbActiveClass: 'swiper-slide-thumb-active',
        },
      });
    },
  },
  watch: {//监听
    seeDeptData: {
      // hanlder这个函数名字固定
      handler: function (news, old) {
        this.enterpriseDataLoading();
      },
      deep: true//对象内部的属性监听，也叫深度监听
    },
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_vehiclePortraitDetails {
  height: 100%;
  background: #454a5d;
  color: #fff;


  .bannerBox {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;


    .gallery-top {
      width: 100%;
      height: 250px;
      border-radius: 8px;
      background: #383c4e;

      .swiper-slide {
        display: flex;
      }

      .swiper-slide_img{
        width: 100%;height: 100%;
        display: flex;
        img{
          display: block;
          margin: auto;
          max-width: 80%;
          max-height: 80%;
          min-width: 30%;
          min-height: 30%;
        }
      }


    }

    .gallery-thumbs {
      width: 100%;
      height: 100px;

      .swiper-bottom {
        filter: grayscale(100%);

        img {
          width: 100%;
          height: calc(100% - 30px);
        }

        div {
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
      }

    }

    .swiper-slide-thumb-active {
      border-radius: 4px;
      filter: grayscale(0) !important;
    }


  }

  ._wz_vehicleDetails {
    background: rgb(56, 60, 78);
    border-radius: 15px;
    color: rgb(255, 255, 255);
    padding: 20px;
    width: 100%;
    height: 380px;
    line-height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;


    ._wz_vehicleDetailsList {
      ._wz_vehicleDetailsList_round {
        background: rgb(92, 93, 101);
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        float: left;
        margin: 12px 0px;
      }

      ._wz_vehicleDetailsList_title {
        margin: 0px 10px;
        width: 80px;
        display: inline-block;
        float: left;
      }

      ._wz_vehicleDetailsList_value {
        margin: 0px 10px;
        display: inline-block;
        width: calc(100% - 130px);
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ._wz_vehicleDetailsList_deptName:hover{
        cursor: pointer;
        color: #2d8cf0;
      }
    }
  }

  ._wz_maintenanceData {
    display: flex;
    width: 100%;
    padding: 15px 10px 15px 15px;
    cursor: pointer;

    ._wz_maintenanceData_img {
      width: 40px;
      height: 40px;
      margin: 0 10px 0 0;

      img {
        width: 100%;
        height: 100%;
      }
    }

    ._wz_maintenanceData_name {
      div {

      }
    }
  }
  ._wz_system_progress{
    .ivu-progress-outer{
      padding-right: 35px;
      margin-right: -35px;
    }
  }
}
</style>
